<template>
  <div class="page-container flex-column-center">

    <div class="page-info-title">
      <p class="o7">月度借阅情况</p>
      <p class="big">{{ year }}年每月借书情况</p>
      <p class="o5">我在{{ month }}月借阅书籍最多，共{{ number }}册次</p>
    </div>

    <div class="page-main-box"></div>

    <img class="page-bg-title" src="@/assets/images/t2.png" />

  </div>
</template>
<script>

export default {
  name: 'pageBorrowMonth',
  props: ['reportData', 'year'],
  data () {
    return {
      month: '-',
      number: '-'
    }
  },
  watch: {
    reportData: {
      immediate: true,
      handler (val) {
        if (val) {
          const d = JSON.parse(val.data3)
          this.month = d.maxMonth.monthNum
          this.number = d.maxMonth.borrowNum
        }
      }
    }
  },
  mounted () {
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100%;
  position: relative;
  background: url('~@/assets/images/bg.png') no-repeat left top,
  linear-gradient(to top, #2da2a9 0%, #80dddb 50%, #80dddb 85%, #2da2a9 100%);
  background-size: 100%;
}
.page-main-box {
  background: transparent;
}
</style>
